<template>
  <h1>角色管理</h1>
  <input type="text" v-model="roleName">
  <button @click="add">添加</button>
  <button @click="del">删除</button>
  <button @click="addCun">保存</button>
  <div>

  </div>

    <div class="box">
      <ul>
        <li v-for="mm in UserInfoList"><label>
          <input @change="filtrate(mm.roleId)" v-model="deld" :value="mm.roleId" type="radio" name="role"/>{{mm.roleName}}
        </label>
        </li>
      </ul>
    </div>
  <div class="left-div">
    <ul>
      <li v-for="menu in menuList">
        <p @click="subMenu" style="font-weight: bold;margin: 0">
          <input type="checkbox" v-model="roleIdList":value="menu.nodeId" />{{menu.displayName}}</p >
        <ul>
          <li  v-for="child in menu.childList">
            <input type="checkbox" v-model="roleIdList":value="child.nodeId" />{{child.displayName}}
          </li>
        </ul>
      </li>
    </ul>
  </div>




</template>

<script setup>



  import {ref} from "vue";
  import api from "@/router/axios.js";

  selUserInfo();
  let UserInfoList = ref({});
  function selUserInfo() {
    api({url: "/role", method: "post"})
        .then(resp => {
          UserInfoList.value = resp.data;
        })
  }

  let menuList = ref();
  selSysFun(); // 调用该方法
  function selSysFun(){
    api({url:"/selSysFun",method:"post"}).then(resp => {
      // 将后端返回的数据赋值给vue
      menuList.value = resp.data;

    })
  }


  let roleIdList = ref([]);

  function filtrate(roleId){
    api({
      url:"/sel",
      params:{"roleId":roleId}
    }).then(resp=>{
      roleIdList.value = resp.data;
    })
  }


  let roleName = ref("");
  function add(){
    api({
      url:"/addRole",
      params:{"roleName":roleName.value}
    }).then(resp=>{
      console.log(resp.data)
    })
  }

  let deld = ref("");
  function del(){
    api({
      url:"/del",
      params:{"roleId":deld.value}
    }).then(resp=>{
      console.log(resp.data)
    })
  }

  //保存角色
  function addCun(){
    api({
      url:"/addCun",
      params:{"roleId":deld.value,
        "nodeId":roleIdList.value.join(',')}
    }).then(resp=>{
      alert(resp.data.message)
      if (resp.data.code == 1)
        selUserInfo();
    })
  }



</script>

<style scoped>
*{list-style: none}
.box{
  float: left;
}
.left-div{
  height: 410px;
  float: left;
  overflow:scroll;
  margin-left: 300px;
}
</style>